<template>
  <Row>
    <i-col :span="24">
      <div id="main" style="height: 760px;width: 960px;"></div>
    </i-col>
  </Row>
</template>
<script>
  import {getFleetToDriverLocation} from '@api/backEnd/fleetControl'
  import echarts from 'echarts'
  import moment from 'moment'
  import 'echarts/map/js/china.js'
  import 'echarts/extension/bmap/bmap.js'
  import _ from 'lodash'

  export default {
    name: 'driverList',
    data () {
      let driverPosition = []
      let localPoint = [87.606043, 43.832012]
      let datas = {driverPosition, localPoint}
      return datas
    },
    computed: {},
    methods: {},
    mounted () {
      let myChart = echarts.init(document.getElementById('main'))
      getFleetToDriverLocation({
        'startTime': moment().subtract().format('YYYY-MM-DD') + ' 00:00:00',
        'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'
      }).then(res => {
        if (res.data.isSuccess === 1) {
          let thisDriverPointGroup = _.groupBy(res.data.data, (item) => { return item.userId })
          let diverInfoStart = {}
          let diverInfoEnd = {}
          let diverValStart = []
          let diverValEnd = []
          let diverPointList = []
          // let geoCoordMap = {'左雯': [86.27073, 41.66376]}
          _.forEach(thisDriverPointGroup, function (diverItem, key) {
            let diverItemSort = _.sortBy(diverItem, (item) => { return +moment(item.createTime) })
            if (diverItemSort.length > 1) {
              let firstItem = diverItemSort[0]
              let lastItem = _.findLast(diverItemSort, function (item) { return item })
              diverInfoStart[firstItem.loginName] = [firstItem.longitude, firstItem.latitude]
              diverInfoEnd[lastItem.loginName] = [lastItem.longitude, lastItem.latitude]
              diverValStart.push({name: firstItem.loginName, value: 100})
              diverValEnd.push({name: lastItem.loginName, value: 100})
            } else if (diverItemSort.length === 1) {
              let lastItem = diverItemSort[0]
              diverInfoEnd[lastItem.loginName] = [lastItem.longitude, lastItem.latitude]
              diverValEnd.push({name: lastItem.loginName, value: 100})
            }
            let oneDiverPointLiner = []
            _.forEach(diverItemSort, function (diverInfo, key) {
              let onePoint = [diverInfo.longitude, diverInfo.latitude]
              oneDiverPointLiner.push(onePoint)
            })
            if (oneDiverPointLiner.length > 1) {
              diverPointList.push({coords: oneDiverPointLiner})
            }
          })
          let convertDataStart = function (dataList) {
            let res = []
            for (let i = 0; i < dataList.length; i++) {
              let geoCoord = diverInfoStart[dataList[i].name]
              if (geoCoord) {
                res.push({
                  name: dataList[i].name,
                  value: geoCoord.concat(dataList[i].value)
                })
              }
            }
            return res
          }
          let convertDataEnd = function (dataList) {
            let res = []
            for (let i = 0; i < dataList.length; i++) {
              let geoCoord = diverInfoEnd[dataList[i].name]
              if (geoCoord) {
                res.push({
                  name: dataList[i].name,
                  value: geoCoord.concat(dataList[i].value)
                })
              }
            }
            return res
          }
          if (thisDriverPointGroup) {
            let myCity = new BMap.LocalCity()
            myCity.get(res => {
              if (res) {
                this.localPoint = [res.center.lat, res.center.lng]
              }
            })
            let option = {
              tooltip: {
                trigger: 'item'
              },
              bmap: {
                center: this.localPoint,
                zoom: 12,
                roam: true
              },
              series: [
                {
                  type: 'lines',
                  coordinateSystem: 'bmap',
                  polyline: true,
                  data: diverPointList,
                  silent: true,
                  lineStyle: {
                    normal: {
                      color: 'red',
                      opacity: 1,
                      width: 2
                    }
                  },
                  progressiveThreshold: 500,
                  progressive: 200
                },
                {
                  name: '起点',
                  type: 'effectScatter',
                  coordinateSystem: 'bmap',
                  data: convertDataStart(diverValStart),
                  symbolSize: function (val) {
                    return val[2] / 10
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'red',
                      shadowBlur: 10,
                      shadowColor: 'red'
                    }
                  }
                },
                {
                  name: '终点',
                  type: 'effectScatter',
                  coordinateSystem: 'bmap',
                  data: convertDataEnd(diverValEnd),
                  symbolSize: function (val) {
                    return val[2] / 10
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'red',
                      shadowBlur: 10,
                      shadowColor: 'red'
                    }
                  }
                }
              ]
            }
            myChart.setOption(option)
            if (option && typeof option === 'object') {
              myChart.setOption(option, true)
            }
          }
        }
      })
    },
    components: {}
  }
</script>
<style scoped>

</style>
